<!DOCTYPE html>
<html>
<head>
  <script src="http://designplusplus.googlecode.com/svn/trunk/MokaBlog/js/processingjs/processing.js"></script>
  <script src="http://designplusplus.googlecode.com/svn/trunk/MokaBlog/js/processingjs/init.js"></script>
</head>
<body>

<script type="application/processing">

Sprite sp = new Sprite();
float speedX = 5;
float speedY = 5;

void setup() 
{
  size(640, 480);
  frameRate(60);
  noStroke();
  smooth();
}

void draw() 
{
  background(0,0,0);
  sp.x+=speedX;
  sp.y+=speedY;
  if(sp.x+sp.width>639 || sp.x<0)speedX = -speedX;
  if(sp.y+sp.height>479 || sp.y<0)speedY = -speedY;
  sp.render();
}

class Sprite{
  float x;
  float y;
  float width;
  float height;

  Sprite(){
    x = 0;
    y = 0;
    width = 50;
    height = 50;
  }

  void render(){
    fill(255,125,0)
    rect(x,y,width,height);
  }
}


</script><canvas width="640" height="480"></canvas>

</body>
</html>
